相信大家看完昨天的文章後，已基本會架設在bootstrap，架設bootstrap menu吧。 不過聰明的你，應該也會發現，這看起來不對勁呀。怎麼怪怪的呀，這下拉式選單的顏色，怎麼又轉不了，然後怎麼這麼悲情，這選單最多竟然只有兩層

今天就為你解決你心中的疑惑，把bootstrap選單，更進一步地優化吧。

Muti－layer的問題

會出現這情況，相信大家第一時間會認為，這是bootstrap navwalker的問題吧。不過可能事實的真相，可能會令你，有點意外，其實，這是bootstrap本身的問題。

有建基於手機化的普及，bootstrap認為，過多層的選單，對於手機用戶來說，並不友善，早在很早以前bootstrap已經宣佈，他們不會提供多於兩層的選單結構，也是因為這樣，無論你在wordpress內怎麼弄，也不會對這情況有任何變化。

雖說bootstrap有著獨到的眼光，認為這設計是不合時宜。不過，生活在現實的我們，哪怕已經捨棄了這設計在手機版，我們還是不時需要多層選單的設計在電腦版中

那麼我們該怎麼辦

要知道的是這個，主要是由javascript和css控制的，css部分主要控制著，當過了兩層後會否再繼續顯示下一層，而javascript部分，只能夠確保你每到下一層時，會有正確的class，所以我們只需要加入少量css到wordpress主題內，並且加入額外的javascript到wordpress中，那麼問題就能夠迎刃而解。下文中，css的部分我會作詳細的解釋，至於javascript的部分，由於內容較為複雜，比較難讓新手們，可以短時間内了解，這裡就不作詳細解釋了，大家有興趣想知到的話我可以在之後再作補充。

css部分

ul.dropdown-menu li > ul.dropdown-menu {
    left: 100%;
    top: 0;
}

ul.dropdown-menu li:hover > ul.dropdown-menu,
ul.dropdown-menu li:focus > ul.dropdown-menu {
    display: block;
}

編碼解釋：

X > Y 和 X Y

假如有細心留意看看，就會注意到編碼裡面出現了這種：ul.dropdown-menu li，裏邊同時出現了ul 和li 這兩個html元素的

但有趣的是，它後面又有> ul.dropdown-menu這樣子，這究竟是什麼來的呢？

他們兩個的用途其實有點相近，都是能夠幫助你去指定一個較小範圍的位置，讓你的css編碼去裝飾。什麼意思呢，生活化點說，就好像我們去網上商店購物的時候，我們不是也會透過商品分類，更容易去找到自己想購買的產品嗎？那麼這兩個的功能就是這樣，能夠幫助你收窄選擇範圍，讓您的編碼只會在特定範圍內有作用。

大概是明白了，不過兩者具體分別又在那裏？

情況就好像我們平常到超市購物那樣，例如減肥的你需要買水，那麼你就會到飲料區，選擇適合的水，然後把它買走。你從不會把飲料區所有的飲料買走，對吧？也不會因為在擺放水的地方，出現了汽水，你就會放棄了你的減肥之旅，順便把它買走，對吧？X > Y也是做著相同的是，編碼只會對選擇x內的y來做裝飾，哪怕y在x內，但y比其他html元素包裹著，css也不會去裝飾這個y

另外一個，則有點特別。他和一般人不同，當到飲料區時，他會把所有的水都買起。這就是X Y，他會把包括在x中的所有y，都裝飾起來。

最後看看下方例子，你就會完全明白了，我們下方例子，都運用了background-color: yellow，嘗試把背景顏色變成黃色，並使用了div 和 p 嘗試來指定特定範圍，大家看看有>和沒有的分別在那吧。

html編碼：

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

首先看看：x y吧，css編碼是這樣子：

div  p {
  background-color: yellow;
}

接著看看：X > Y，css編碼是這樣子：

div > p {
  background-color: yellow;
}

相信兩者差別，也是很清楚吧，這裡你也留意到段落3裏，被span包裹著的，在div>p 中，顏色是不會變化，這就是為什麼我會說，在只有在x內的y會受影響，只要有其他html元素包裹著，那麼css就不會來幫它裝飾了。

來到這裡，相信大家知道它在說什麼吧，可以自己嘗試理解看看啊^^

left 和 top

還記得之前提及過的margin嗎，其實這個的概念也是類近，所以這樣說它也是有上下左右四種？你答對了^^

他們的分別在於，這四個，是需要跟著 position：absolute， position：relative，或 position：fixed，才能夠運作起來。

又是甚麼來的？

冷靜點，那些其實並沒有您想像中，那麼複雜。我們來看看下面這個故事吧。

這個家，住著三隻狗。他們三隻狗的性格都很不同。第一隻，是一隻鬥牛㹴，它非常兇惡，所以主人就把牠安置到家裡的庭院，充當著家門犬，較會進入屋內。第二隻，是一隻巴哥犬，大家都知道巴哥犬體力一向都不好，所以牠通常就是愛宅在家中，哪怕是出門也只是會到家前的地方走走。第三隻，是一隻grey hound ，一隻非常愛運動的獵犬，所以主人總是愛帶著牠，到四處運動。

那麼這又有什麼關係呢？

假若家就是div，庭院就是螢幕的上方，每次載入時會出現的畫面，外邊的世界，就是用家用滑鼠把畫面滑向下方，是會看到的畫面，那麼：

position：absolute就像故事的鬥牛㹴

在position：absolute下，那個物件不再受到div的限制，而是能夠在螢幕上方的空間，自由活動。

position：relative就像故事的巴哥犬

在positive：relative下，那個物件就只能夠div附近活動了。

position：fixed就像故事的獵犬

在position：fixed下，那個物件可以走出家的庭院，走到外面世界，只要還在那頁面，用家都會看到它。

最後在這裡附上一張外國網站的圖片：

Left，top，right ，bottom 的作用，就是來調節調節位置：

我們就用relative作例子吧

例如我們設定了，left和top，那麼就會像這樣子，這裡補充一句，那個沒有relative的是原本的位置：

例如我們設定了，right和bottom，那麼就會像這樣子：

看到這裡就明白為何會說像margin把，它就像加了個外界那樣，讓那個物件偏離了原本的位置。在position：fixed，和psoition：absolute的情況也是相近，不過就會變成原來熒幕邊界，而不再是div了。

說了那麼多，但我們這裡根本不需要加入positive－relative或absolute這些呀？這是因為原本bootstrap就有設定，所以這部分就跳過了。

至於後面單位呢，那個當然不一定要用%，也可以用之前說過的，一些編碼常用的大小設定，詳情可以看這裡。

：hover 和：focus

這些我們稱為偽類，不過其實也不用理會這個花巧的名稱，反正你知道，他們會為你，在一些特別情況下，添加一些有趣的裝潢就對了，當然那些裝潢也是要自己編寫。Zzz

：hover，當你劃過去的時候會出現的效果
：focus，用戶在選取中的時候，例如你在it幫的技術文章時，他的顏色會不同，這就是focus的例子

還有一些比較常見的，都是和連結相關的
：link，當那個為連結還沒被訪問時，會出現的效果
：visited，點擊後會出現的效果
：active，當用家按下去的時候

Display：block

display：block的存在，有點像bootstrap的contianer，不過display block 就只是讓系統開了個方格，至於大小呀，位置呀這些，就需要其他css幫助了，這也就是和container的最大差別。現在知道你為什麼你明明設定了下層的選單，卻又看不到吧？這就是主要的原因了，因為bootstrap根本沒有為你下層的選單，開啟任何的方格，那麼當然什麼也看不到吧

如何加入css編碼

把css編碼加到style.css就可以了，假如不太滿意出來選單的位置，那麼也可以在top和left那裡，調整一下數值。加入後，一定要像之前那樣，把css在funtion.php內登記，您可以把它和之前的bootstrap.css
放在一起，如下：

function load_css()
{
  wp_register_style('bootstrap',get_template_directory_uri().'/css/bootstrap.min.css',array(),false,'all');
  wp_enqueue_style('bootstrap');


  wp_enqueue_style('style',get_stylesheet_uri());
}
add_action('wp_enqueue_scripts','load_css');

get_stylesheet_uri() 和 get_template_directory_uri()

除了我們一直使用的 get_template_directory_之外，其實還有get_stylesheet_，為什麼會用到stylesheet？之前都有說過吧，一個最基本的wordpress主題，必須要有style.css和 index.php，這兩個檔案，才能正常運作，也因為style.css有著這樣獨特的地位，wordpress為了能把它分清楚，所以就把這歸類為stylesheet，而我們一般的，則歸類為template。所以我們這裡，就需要用到stylesheet了。

Javascript 部分

 $(document).ready(function () {
 $('.dropdown-menu > li > .dropdown-menu').parent().addClass('dropdown-submenu').find(' > .dropdown-item').attr('href', 'javascript:;').addClass('dropdown-toggle');
 $('.dropdown-submenu > a').on("click", function (e) {
  var dropdown = $(this).parent().find(' > .show');
  $('.dropdown-submenu .dropdown-menu').not(dropdown).removeClass('show');
  $(this).next('.dropdown-menu').toggleClass('show');
  e.stopPropagation();
 });
 $('.dropdown').on("hidden.bs.dropdown", function () {
  $('.dropdown-menu.show').removeClass('show');
 });
});

我們把下方這段內容複製起來，然後在js文件夾內開啟一個新檔案，把內容放進去，接著我們像之前那樣把它登記起來，放置到等候區。這個和css一樣，也是可以和之前的bootstrap_javascript，放在一起。

Dropdown menu 顏色

當你明白了上方的時候，這裡就很簡單了，因為這個bootstrap nav walker 還是一樣，使用着bootstrap編碼，所以我們參考著之前製作的選單時，所使用的，與選單相關的class來修改，就可以了。
當然若你不太放心，也可以到google開發者工具，像之前html那樣，點擊想加工的部分。然後可以留意一下，你想加入的class，它們是不是也真的在使用。

另外，你也可以在旁邊的css欄位，嘗試找尋嘗試的class，加入編碼試試看，甚至可以自己按加號，直接加入自己想加入的css啊，這樣你就可以即時看到改變了，非常方便。

顏色的css就是：background－color：（顏色編碼） ，文字顏色就是color：（顏色編碼） ， 適當時候也可以在class加入：hover和：focus 等顏色啊，你也可以嘗試利用top，left等，來改變選單的位置。

編碼參考

.dropdown-menu.show,.dropdown-menu{background-color: #17a2b8;border-color: #17a2b8;}
.dropdown-item:focus{background-color: #17a2b8;}
.dropdown-item:hover{background-color: #17a2b8;}
.dropdown-item{color: white;}

完成

假如所有編碼都沒有錯誤的話，最後就會像這樣子：